@import url("css/reset.css");

* {
    outline: none;
}

html {
    height: 100%;
}

body {
    background: url(images/circular_bg.jpg) no-repeat 50% 80% #2e2e30;
    min-height: 100%;
    font: 13px/1.5em Helvetica, Arial, Verdana, 'Comic Sans MS', sans-serif;
    height: 100%;
}

p {
    margin: 0 0 20px 0;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; 
}

.clearfix {
  zoom: 1; 
}

.hidden {
    display: none;
}

#container {
    height: 100%;
    min-height: 500px;
    min-width: 700px;
    position: absolute;
    width: 100%;
}

#main {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -250px;
    height: 400px;
}

h1 {
    color: white;
    text-shadow: 1px 1px 0 #38383a;
    font-weight: 100;
    font-size: 24px;
    margin: 0 auto;
    line-height: 1.35em;
    margin: 0 0 35px 0;
}
    h1 strong {
        color: #79b41d;
        font-weight: 600;
        position: relative;
    }
    
#main p {
    font-size: 17px;
    color: #999;
    text-shadow: 1px 1px 0 #38383a;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0 0 35px 0;
}    
      
/*.examples {
    color: #999;
    font-weight: 100;
    float: left;
    position: absolute;
    top: 5px;
    left: -20px;
    padding: 50px 0 0 20px;
    background: url(images/examples_tree.png) no-repeat 5px 0;
    
}
    .examples .first {
        font-size: 26px;
    }
    .examples .second {
        font-size: 22px;
        color: #7f7f7f;
        padding: 18px 0 12px 0;
    }
    .examples .third {
        font-size: 18px;
        color: #6c6c6c;
    }*/
    
.duolingo_logo {
    width: 210px;
    height: 80px;
    bottom: 30px;
    position: absolute;
    left: 50%;
    margin-left: -105px;
    background: url("images/duolingo_logo.png") no-repeat;
    text-indent: -10000px;
}
    .duolingo_logo:hover {
        background-position: 0 -80px;
        cursor: pointer;
    }
    .duolingo_logo:active {
        background-position: 0 0;
    }

.nav_footer {
    position: absolute;
    left: 30px;
    bottom: 15px;
}
    .nav_footer li.twitter {
        width: 50px;
        height: 36px;
        float: left;
        margin: 0 15px 0 0;
    }    
        .nav_footer li.twitter a {
            background: url("/images/frontpage_022211/icon_twitter.png") no-repeat 0 0;   
            text-indent: -10000px;     
            display: block;
            height: 100%;
        }
    .nav_footer li.mail {
        width: 150px;
        height: 36px;
        float: left;
        margin: 0 15px 0 0;
    }    
        .nav_footer li.mail span {
            background: url("/images/frontpage_022211/icon_mail.png") no-repeat 0 0; 
            position: relative;
            top: 5px;       
            cursor: pointer;
            height: 36px;
            padding: 0 0 0 53px;
            line-height: 26px;
            display: block;
            color: #636263;
            font-weight: 100;
            font-size: 90%;
        }

        .nav_footer li a:hover, .nav_footer li span:hover {
            background-position: 0 -36px;
        }
        .nav_footer li a:active, .nav_footer li span:active {
            background-position: 0 -72px;
        }
        
.copyright {
    position: absolute;
    right: 30px;
    bottom: 23px;
    color: #636263;
    font-weight: 100;
    font-size: 90%;
    margin: 0;
}

.modal_box {
    width: 320px;
    bottom: 70px;
    left: 80px;
    background: rgba(37, 36, 38, 0.9);
    border: 1px solid #373639;
    padding: 20px 20px 20px 20px;
    position: absolute;
    color: #999;
    font-weight: 100;
    display: none;
}
    .modal_box .arrow {
        width: 26px;
        height: 9px;
        background: url("/images/frontpage_022211/modal_box_arrow.png");
        position: absolute;
        bottom: -10px;
        left: 26px;
    }

input {
    background: #1c1b1d;
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 100;
    padding: 8px;
    float: left;
    border: 1px solid #252426;
}

input.error {
    background: url("/images/frontpage_022211/form_error.png") no-repeat center right #1c1b1d;
}

.btn {
    background: #3c3c3c;
    color: #79b41d;
    font-weight: 700;
    border-top: 1px solid #474649;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,0.1);
    -o-box-shadow: 0 1px 0px rgba(0,0,0,0.1);
    box-shadow: 0 1px 0px rgba(0,0,0,0.1);
    text-shadow: 1px 1px 0 #222;
}
   .btn:hover {
        background: #444444;
    } 
    .btn:focus, .btn:active {
        outline: none;
    } 
    
.email {
    margin: 0 10px 5px 0;
    width: 170px;
    padding: 8px 35px 8px 8px ;
}
.form_msg {
    margin: 0 0 10px 0;
    clear: both;
    font-size: 90%;
    
}